<template>
  <ContentWrap>
    <div :class="searchVisible ? 'flex flex-row flex-wrap mb-2' : 'flex flex-row flex-wrap'">
      <!-- <el-button
        plain
        type="primary"
        @click="openForm('create')"
        v-hasRole="['super_admin', 'platform_admin', 'tenant_admin']"
      >
        <Icon class="mr-5px" icon="ep:plus" />
        新增
      </el-button> -->
      <el-button plain type="success" @click="searchVisible = !searchVisible">
        <Icon class="mr-5px" icon="ep:operation" />
        {{ searchVisible ? '关闭筛选' : '打开筛选' }}
      </el-button>
      <el-text type="info">
        <span class="ml-5px">{{
          searchVisible ? '点击关闭筛选条件' : '点击打开筛选条件'
        }}</span>
      </el-text>
      <div class="flex-1"></div>
      <el-button @click="resetQuery">
        <Icon class="mr-5px" icon="ep:refresh" />
        刷新列表
      </el-button>
    </div>
    <el-form v-if="searchVisible" ref="searchFormRef" :model="tableData.searchParam" inline>
      <el-form-item label="关键词" prop="keyword">
          <el-input
            v-model="tableData.searchParam.keyword"
            class="!w-240px"
            placeholder="请输入关键词"
            clearable
          />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="tableData.searchParam.createTime"
          type="datetimerange"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon class="mr-5px" icon="ep:search" />
          搜索
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <ContentWrap>
    <div class="mt-[5px]">
      <el-table :data="tableData.list" size="large" v-loading="tableData.loading">
        <template #empty>
          <span>{{ !tableData.loading ? '没有相关数据' : '' }}</span>
        </template>
        <#list table.fields as field>
        <el-table-column label="${field.comment}" min-width="100">
          <template #default="{ row }">
            <div>{{ row.${field.propertyName} }}</div>
          </template>
        </el-table-column>
        </#list>
        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          :formatter="dateFormatter"
          min-width="170"
        />
      <!-- <el-table-column
        v-hasRole="['super_admin', 'platform_admin', 'tenant_admin']"
        label="操作"
        min-width="100"
        align="center"
        fixed="right"
      >
        <template #default="scope">
          <el-button link type="primary" @click="openForm('update', scope.row.id)">
            编辑
          </el-button>
          <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <Pagination
      v-model:limit="tableData.searchParam.pageSize"
      v-model:page="tableData.searchParam.pageNo"
      :total="tableData.total"
      @pagination="loadTableData"
    />
  </div>
</ContentWrap>

  <!-- <${entity}Form ref="formRef" @success="loadTableData" /> -->
  </template>

<!--suppress HtmlUnknownAttribute -->
  <script lang="ts" setup name="${entity}List">
  import * as ${entity}Api from '@/api/${apiPath}'
  import { FormInstance } from 'element-plus'
  import { dateFormatter } from '@/utils/formatTime'
  //import ${entity}Form from './${entity}Form.vue'

  const { t } = useI18n()
  // const message = useMessage()

  const searchVisible = ref(false)

  const tableData = reactive({
  total: 0,
  loading: true,
  list: [],
  searchParam: {
    pageNo: 1,
    pageSize: 10,
    keyword: '',
    createTime: []
  }
  })

  const loadTableData = () => {
  tableData.loading = true
  ${entity}Api.getPage({
    ...tableData.searchParam
  })
    .then((res: any) => {
      tableData.loading = false
      tableData.list = res.list
      tableData.total = res.total
    })
    .catch(() => {
      tableData.loading = false
    })
  }

  const searchFormRef = ref<FormInstance>()

  const handleQuery = () => {
  tableData.searchParam.pageNo = 1
  loadTableData()
  }

  const resetQuery = () => {
  searchFormRef.value?.resetFields()
    handleQuery()
  }

  // const formRef = ref()
  // const openForm = (type: string, id?: number | string) => {
  //   formRef.value.open(type, id)
  // }
  //
  // const handleDelete = async (id: number | string) => {
  // try {
  //   await message.delConfirm()
  //   await ${entity}Api.deleteById(id)
  //   message.success(t('common.delSuccess'))
  //   loadTableData()
  // } catch {}
  // }

  onMounted(() => {
    handleQuery()
  })
  </script>
